extends inc/main.pug
block variables

block css
	style(type="text/css").
		.top {
			padding-bottom: 0;
		}
		.notes {
			float: right;
		}
		#slider1 {
			height: 394px;
			background: #000;
			border-radius: 4px;
			overflow: hidden;
		}
		
		#slider1 h3
		, #slider1 h4
		, #slider1 h5
		, #slider1 p {
			margin: 0;
			padding: 5px 10px;
			color: #fff;
			background: #000;
			background: rgba(255, 255, 255, 0.2);
			position: absolute;
			left: 5%;
			z-index: 1;
		}
		#slider1 h3 {
			font-size: 1.75em;
			line-height: 1;
			top: 20px;
		}
		#slider1 h4 {	
			font-size: 1em;
			line-height: 1;
			top: 63px;
		}
		#slider1 p {
			font-size: 1em;
			line-height: 1;
			top: 110px;
		}
		#slider1 p + p {
			top: 140px;
		}
		#slider1 h5 {
			font-size: 1em;
			line-height: 1;
			font-weight: normal;
			font-style: italic;
			margin-left: 150px;
			top: 180px;
		}
		
		/* responsive rules */
		@media (max-width: 713px) {
			#slider1 {
				height: auto; /* reset slider height to automatically fix with the first image height. */
				border-radius: 0;
			}
			.notes {
				float: none;
			}
		}

block content
	.top
		.tv
			#slider1.jSlider(data-delay="0")
				div: img(src="images/photo1.jpg" alt="sample photo")
				.selected
					h3.appear-top This is the slide title!
					h4.appear-right This can be moved after the slide is showed...
					p.appear-left ...in different directions...
					p.appear-bottom ...and with different animation effects
					h5.appear-fade powered by jSlider!
					img(src="images/photo2.jpg" alt="sample photo")
				- var val = 3
				while val++ < 6
					div: img(src='images/photo'+val+'.jpg')
		.notes
			h6 Animated content is on slider #2.
				br
				| Slider #2 is activated at the begining.
				br
				| Auto play is disabled.
